<script setup>
// getDate()
import '@fortawesome/fontawesome-free/css/all.min.css'
import { fetchIndicesDate } from '../api/weatherAPI'
import { watch, ref } from 'vue'
import { useCityStore } from '../stores/cityStore'
import { useRouter } from 'vue-router'
const cityStore = useCityStore()
const router = useRouter()
const activeItem = ref(null)

watch(
  () => cityStore.location,
  () => {
    // city = ref(cityStore.location.name)
    getDate(cityStore.location.id)
  },
  { immediate: true }
)
const indiceDaily = ref([])
async function getDate(locationID) {
  const res = await fetchIndicesDate(locationID, 0)
  console.log(res)
  indiceDaily.value = res.daily
}
function select(items) {
  console.log(items)
  router.push(`/livingdetail/${items.type}`)
}

function showDetail(item) {
  activeItem.value = item
}

function hideDetail() {
  activeItem.value = null
}
</script>
<template>
  <div class="indice">
    <h1>生活指数</h1>
    <ul>
      <li
        v-for="(items, i) in indiceDaily"
        :key="i"
        @click="select(items)"
        @mouseenter="showDetail(items)"
        @mouseleave="hideDetail"
      >
        <p>{{ items.name }}</p>
        <p>{{ items.category }}</p>

        <!-- 悬浮详情卡片 -->
        <div v-if="activeItem === items" class="hover-detail">
          <p class="detail-title">{{ items.name }}详情</p>
          <p class="detail-text">{{ items.text || '暂无详细说明' }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<style scoped>
.indice {
  background-color: #86e3ffba;
  border-radius: 2rem;
  padding: 2rem;
  margin-top: 2rem;
}
.indice > h1 {
  text-align: center;
  padding-bottom: 1rem;
}
.indice > ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.indice > ul > li {
  position: relative;
  background-color: rgb(116, 154, 250);
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
}
.indice > ul > li:hover {
  background-color: rgba(36, 71, 146, 0.705);
}
.indice > ul > li > p:nth-of-type(1) {
  font-weight: bolder;
}
.indice > ul > li > p:nth-of-type(2) {
  font-size: 0.8rem;
}

/* 新增悬浮卡片样式 */
.hover-detail {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
  border: 1px solid #eee;
}

.hover-detail::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 20px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

.detail-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #333;
}

.detail-text {
  font-size: 0.9rem;
  color: #666;
}
</style>